<template>
  <div class="tab-content tab-account">
    <!-- top-search begin -->
    <div class="top-search top-more-search" v-show="showSearch">
      <el-form
        inline
        ref="searchForm"
        label-width="0"
        class="search-form"
        :class="{ 'show-more': showFormMore }"
        :model="searchForm">
        <el-form-item prop="customer">
          <el-input
            v-model="searchForm.customer"
            clearable
            placeholder="请输入客户名称"
            @keyup.enter.native="search()"></el-input>
        </el-form-item>
        <el-form-item prop="accountName">
          <el-input
            v-model="searchForm.accountName"
            clearable
            placeholder="请输入账户名称"
            @keyup.enter.native="search()"></el-input>
        </el-form-item>
        <el-form-item prop="bank">
          <el-input
            v-model="searchForm.bank"
            clearable
            placeholder="请输入开户银行"
            @keyup.enter.native="search()"></el-input>
        </el-form-item>
        <el-form-item prop="bankAccount">
          <el-input
            v-model="searchForm.bankAccount"
            clearable
            placeholder="请输入银行账号"
            @keyup.enter.native="search()"></el-input>
        </el-form-item>
        <div class="search-more-item" v-show="isBigWindow || showFormMore">
          <el-form-item prop="city">
            <el-input
              v-model="searchForm.city"
              clearable
              placeholder="请输入开户城市"
              @keyup.enter.native="search()"></el-input>
          </el-form-item>
        </div>
        <el-form-item class="search-btn-part">
          <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery()">重置</el-button>
          <el-button v-if="!isBigWindow" class="more-btn" type="text" @click="searchShowMore()">{{ !showFormMore ? '更多搜索' : '收起'
          }}<span class="ml5" :class="`el-icon-arrow-${!showFormMore ? 'down' : 'up'}`"></span></el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- top-search end -->
    <!-- right-toolbar begin -->
    <right-toolbar ref="rightToolbar" :showSearch.sync="showSearch" @queryTable="search()">
      <template v-slot:operaBar>
        <el-button
          type="warning"
          icon="el-icon-download"
          @click="handleShow()">导出</el-button>
          <span class="tool-bar-tip">标红为账户余额不足的客户，请提醒客户充值。</span>
      </template>
    </right-toolbar>
    <!-- right-toolbar end -->
    <!-- table begin -->
    <el-table ref="pageTable" class="page-table border-all mt10" :data="tableData" :row-class-name="tableWarningClassName" border stripe>
      <el-table-column type="selection" width="55" fixed></el-table-column>
      <el-table-column
        align="center"
        type="index"
        label="序号"
        width="46"
        fixed>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="账户编码"
        prop="accountCode"
        min-width="106"
        fixed
        sortable>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="客户名称"
        prop="customerName"
        min-width="136"
        fixed>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="账户名称"
        prop="accountName"
        min-width="136"
        fixed>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        min-width="86">
        <template slot="header">
          <span>账户余额</span>
          <el-tooltip
            effect="dark"
            content="客户账户剩余的金额，负数为欠费"
            placement="top">
            <span class="ml5 tip-icon el-icon-question"></span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span class="color-success">{{ MixinFormatPrice(scope.row.accountBalance) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        min-width="86">
        <template slot="header">
          <span>授信额度</span>
          <el-tooltip
            effect="dark"
            content="客户账户余额为0时的可欠费额度"
            placement="top">
            <span class="ml5 tip-icon el-icon-question"></span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span class="color-success">{{ MixinFormatPrice(scope.row.creditLine) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        min-width="86">
        <template slot="header">
          <span>可用余额</span>
          <el-tooltip
            effect="dark"
            content="可用余额=账户余额+授信额度"
            placement="top">
            <span class="ml5 tip-icon el-icon-question"></span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span class="color-success">{{ MixinFormatPrice(calculateAvailableBalance(scope.row)) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="accountType"
        label="账户类型"
        min-width="76">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="bank"
        label="开户银行"
        min-width="108">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="bankAccount"
        label="银行账号"
        min-width="98">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="city"
        label="开户城市"
        min-width="78">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="accountType"
        label="地址"
        min-width="108">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="remark"
        label="备注"
        min-width="108">
      </el-table-column>
      <el-table-column
        label="操作"
        width="136"
        fixed="right">
        <template slot-scope="scope">
          <div class="opera-row">
            <el-button class="opera-item" type="text" @click="recharge(scope.row)">充值</el-button>
            <el-button class="opera-item" type="text" @click="showTransactionHistory(scope.row)">交易流水</el-button>
            <el-button class="opera-item" type="text" @click="editAccount(scope.row)">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- table begin -->
    <!-- page-pagination begin -->
    <pagination
      class="page-pagination"
      :total="total"
      :page-size="pageSize"
      :page-index="pageIndex"
      @change="pageChange">
    </pagination>
    <!-- page-pagination end -->
  </div>
</template>

<script>
import mixin from '@/utils/filtermixin/mixin';
import listmixin from '@/utils/list-mixin';
import * as API_Account  from "@/api/bms/account";

export default {
  name: 'tab-account',
  components: {
  },
  mixins: [mixin, listmixin],
  data () {
    return {
      searchForm: {
        customer: undefined,
        accountName: undefined,
        bank: undefined,
        bankAccount: undefined,
        city: undefined
      },
      tableData: [
        {
          index: 1,
          accountCode: 'ACC0001',
          customerName: '客户A',
          accountName: '主账户',
          accountBalance: 1000,
          creditLine: 5000,
          availableBalance: 6000,
          accountType: '预付账户'
        },
        {
          index: 2,
          accountCode: 'ACC0002',
          customerName: '客户B',
          accountName: '备用账户',
          accountBalance: -29.5,
          creditLine: 0,
          availableBalance: -29.5,
          accountType: '预付账户'
        },
        {
          index: 3,
          accountCode: 'ACC0003',
          customerName: '客户C',
          accountName: '主账户',
          accountBalance: 0,
          creditLine: 0,
          availableBalance: 0,
          accountType: '预付账户'
        },
        {
          index: 4,
          accountCode: 'ACC0004',
          customerName: '客户D',
          accountName: '信用账户',
          accountBalance: 2000,
          creditLine: 5000,
          availableBalance: 7000,
          accountType: '信用账户'
        },
        {
          index: 5,
          accountCode: 'ACC0005',
          customerName: '客户E',
          accountName: '主账户',
          accountBalance: -100,
          creditLine: 200,
          availableBalance: 100,
          accountType: '信用账户'
        }
      ],

      // 分页属性
      total: 0, // 记录总条数
      pageSize: 20, // 每页显示条数
      pageIndex: 1 // 当前页
    };
  },
  mounted () {
    // 获取页面数据
    // this.search();
  },
  methods: {
    /**
      * @date 2025/07/01
      * @author wolfMan
      * @description {账户为0的行报警告}
    */
    tableWarningClassName ({ row }) {
      if (!!row.accountBalance && row.accountBalance < 0) {
        return 'table-warning-row';
      };
    },
    /**
      * @date 2025/06/30
      * @author wolfMan
      * @description {页面查询}
    */
    search (_type) {
      let _params = this.MixinFilterParams(this.MixinClone(this.searchForm));
      if (_type !== 'selectPage') {
        this.pageIndex = 1; // 重置翻页当前页
      };
      this.getPageData(_params);
    },
    /**
      * @date 2025/06/30
      * @author wolfMan
      * @description {获取页面数据}
    */
    getPageData (params) {
      let _params = {
        ...params,
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      };
      API_Account.getListService(_params).then(response => {
        if (response && response.code == 200) {
          this.tableData = response.rows || [];
          this.total = response.total;
        } else {
          this.$msgError(response.msg);
        };
      });
    },
    /**
      * @date 2025/06/30
      * @author wolfMan
      * @description {计算可用余额 (账户余额 + 授信额度)}
    */
    calculateAvailableBalance(row) {
      const accountAmount = parseFloat(row.accountAmount || 0);
      const creditAmount = parseFloat(row.creditAmount || 0);
      return accountAmount + creditAmount;
    },
    /**
      * @date 2025/06/30
      * @author wolfMan
      * @description {新增费用补录}
    */
    handleShow (_row) {
      this.dialogSupplementStatus = _row ? 'edit' : 'new';
      this.supplementId = _row ? _row.id : undefined;
      this.dialogSupplement = true;
    },
    /**
      * @date 2023/12/27
      * @author wolfMan
      * @description {页面数据刷新}
    */
    refresh() {
      this.$refs.pageTable.clearSelection();
      this.search('selectPage');
    }
  }
};
</script>

<style lang="scss" scoped>
</style>